<template>
  <div class="app-container">
    <IndexTop :list="list" style="width: 98%;margin-left: 1%;" />
    <el-row :gutter="20" style="margin-top: 24px;position: relative;">
      <!-- <line-chart2 :chart-data="lineChartDatas" style="width: 50%;float: left;" /> -->
      <line-chart3 :chart-data="CList" style="width: 64%;float: left;margin-left: 2%;" />
      <CircularDiagram :chart-data="BTList" style="width: 31.5%;float: left;height: 221px;margin-left: 1%;" />
      <div class="index_xms">
        <img src="@/assets/index/xms.png" alt="" class="index_xms_img">
        <div class="index_xms_text">
          <span class="index_xms_text_span">项目数 {{ list.totalProjectNumber }}</span>
        </div>
      </div>

      <div class="index_xms1">
        <img src="@/assets/index/sps.png" alt="" class="index_xms_img">
        <div class="index_xms_text">
          <span class="index_xms_text_span">商品数 {{ list.totalProductNumber }}</span>
        </div>
      </div>
    </el-row>
    <el-row :gutter="20" style="margin-top: 24px;position: relative;display: flex;align-items: center;">
      <AllOrder style="width: 31.5%;" :list="AllOrderList" :title="title1" />
      <AllOrder style="width: 31.5%;margin-left: 1.3%;" :list="fydList" :title="title2" />
      <AllOrder style="width: 31.5%;margin-left: 1.3%;" :list="bgdList" :title="title3" />
    </el-row>
    <el-row :gutter="20" style="margin-top: 24px;position: relative;">
      <FlowSheet :list="FlowSheetList" @list-updated="updateList" />
    </el-row>
    <!--海关-->
    <!-- <el-row v-if="cstatistics === 1" :gutter="20"> <panel-group :base-data="baseData" :title="ctitle" /></el-row>
    <el-row v-if="cstatistics === 1" :gutter="20">
      <line-chart :chart-data="lineChartData" style="width: 50%;float: left;" />
      <bar-chart :chart-data="barChartData" style="width: 50%;float: left;" />
    </el-row> -->

    <!--空进空出-->
    <!-- <el-row v-if="bStatistics === 1" :gutter="20"> <panel-group2 :base-datas="baseDatas" :title="btitle" /></el-row>
    <el-row v-if="bStatistics === 1" :gutter="20">
      <line-chart2 :chart-data="lineChartDatas" style="width: 50%;float: left;" />
      <bar-chart2 :chart-data="barChartDatas" style="width: 50%;float: left;" />
    </el-row> -->
  </div>
</template>
<style>
.dashboard-editor-container {
  padding: 3px !important;
}
</style>
<script>

import PanelGroup from './components/PanelGroup'
import PanelGroup2 from './components/PanelGroup2'
import LineChart from './components/LineChart'
import LineChart2 from './components/LineChart2'
import LineChart3 from './components/LineChart3'
import BarChart from './components/BarChart'
import BarChart2 from './components/BarChart2'
import CircularDiagram from './components/CircularDiagram'
import FlowSheet from './components/FlowSheet'
import IndexTop from './components/IndexTop'
import AllOrder from './components/AllOrder'
import { statistics, businessStatistics, getStatistics, getAllOrder, getFlowSheet } from '@/api/index'
// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    PanelGroup2,
    LineChart,
    LineChart2,
    LineChart3,
    BarChart,
    BarChart2,
    CircularDiagram,
    FlowSheet,
    IndexTop,
    AllOrder
    // RaddarChart,
    // PieChart,
    // BarChart
    // TransactionTable,
    // TodoList,
    // BoxCard
  },
  data() {
    return {
      lineChartData: {},
      lineChartDatas: {},
      barChartData: {},
      barChartDatas: {},
      baseData: {},
      baseDatas: {},
      ctitle: [],
      btitle: [],
      cstatistics: 0,
      bStatistics: 0,
      list: { 'warehousingNumber': {
        'total_number': '1000',
        'already_number': '0'
      },
      'warehouseOutNumber': {
        'total_number': '2000',
        'already_number': '0'
      }},
      CList: {},
      BTList: {},
      FlowSheetList: [],
      AllOrderList: [],
      title1: '订单',
      title2: '费用单',
      title3: '报关单',
      fydList: [{
        ifName: false,
        project_name: '阿玛尼粉底液',
        format_time: '05-15 09:36',
        order_type: '出库',
        goods_number: '299'
      }, {
        ifName: false,
        project_name: '阿玛尼粉底液',
        format_time: '05-14 19:36',
        order_type: '出库',
        goods_number: '157'
      }, {
        ifName: false,
        project_name: '阿玛尼粉底液',
        format_time: '05-13 12:27',
        order_type: '出库',
        goods_number: '326'
      }, {
        ifName: false,
        project_name: '兰蔻极光粉水',
        format_time: '05-13 10:05',
        order_type: '入库',
        goods_number: '426'
      }, {
        ifName: false,
        project_name: '阿玛尼粉底液',
        format_time: '05-12 14:20',
        order_type: '出库',
        goods_number: '333'
      }, {
        ifName: false,
        project_name: '兰蔻极光粉水',
        format_time: '05-12 11:36',
        order_type: '入库',
        goods_number: '159'
      }],
      bgdList: [{
        ifName: false,
        project_name: '阿玛尼粉底液',
        format_time: '05-15 09:36',
        order_type: '出库',
        goods_number: '299'
      }, {
        ifName: false,
        project_name: '阿玛尼粉底液',
        format_time: '05-14 19:36',
        order_type: '出库',
        goods_number: '157'
      }, {
        ifName: false,
        project_name: '阿玛尼粉底液',
        format_time: '05-13 12:27',
        order_type: '出库',
        goods_number: '326'
      }, {
        ifName: false,
        project_name: '兰蔻极光粉水',
        format_time: '05-13 10:05',
        order_type: '入库',
        goods_number: '426'
      }, {
        ifName: false,
        project_name: '阿玛尼粉底液',
        format_time: '05-12 14:20',
        order_type: '出库',
        goods_number: '333'
      }, {
        ifName: false,
        project_name: '兰蔻极光粉水',
        format_time: '05-12 11:36',
        order_type: '入库',
        goods_number: '159'
      }],
      demoNum: 1
    }
  },
  created() {
    // this.statistics()
    // this.businessStatistics()
    this.getStatistics()
    this.getAllOrder()
    this.getFlowSheet()
  },
  methods: {
    getFlowSheet() {
      getFlowSheet().then(response => {
        if (response.code === 10000) {
          this.FlowSheetList = response.data
        }
      })
    },
    updateList(newList) {
      this.FlowSheetList = newList
    },
    getAllOrder() {
      getAllOrder().then(response => {
        if (response.code === 10000) {
          this.AllOrderList = response.data
          this.AllOrderList = this.AllOrderList.slice(0, 6)
          this.AllOrderList.forEach((item, index) => {
            item.ifName = false
            if (item.project_name.length > 10) {
              item.ifName = true
              item.allName = item.project_name
              item.project_name = item.project_name.slice(0, 10) + '...'
            }
          })
        }
      })
    },
    getStatistics() {
      getStatistics({}).then(response => {
        if (response.code === 10000) {
          this.list = response.data
          this.CList.times = this.list.day
          for (let i = 0; i < this.CList.times.length; i++) {
            this.CList.times[i] = this.CList.times[i] + '日'
          }
          this.CList.clears = this.list.stockData
          var arr = this.list.distribution
          // 把arr数组对象 里的 config_name 换成 name
          for (let i = 0; i < arr.length; i++) {
            arr[i].name = arr[i].config_name
            arr[i].value = arr[i].number
            delete arr[i].config_name
            delete arr[i].number
          }
          this.BTList = arr
        }
      })
    },
    statistics() {
      this.ctitle = ['昨日订单', '昨日清关', '今日订单', '今日清关', '本月订单', '本月清关', '总订单', '总清关']
      statistics({}).then(response => {
        if (response.code === 10000) {
          this.cstatistics = 1
          this.baseData = response.data.baseData
          this.lineChartData = response.data.lineChartData
          this.barChartData = response.data.barChartData
        }
      })
    },
    businessStatistics() {
      this.btitle = ['昨日空进空出', '昨日海进海进', '今日空进空出', '今日海进海进', '本月空进空出', '本月海进海进', '总空进空出', '总海进海进']
      businessStatistics({}).then(response => {
        if (response.code === 10000) {
          this.bStatistics = 1
          this.baseDatas = response.data.baseData
          this.lineChartDatas = response.data.lineChartData
          this.barChartDatas = response.data.barChartData
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.app-container {
  background: rgba(245, 246, 250, 1);
}

.index_xms {
  position: absolute;
  top: 230px;
  right: 1.5%;
  width: 31.5%;
  height: 82px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;

  .index_xms_img {
    width: 52px;
    height: 52px;
    margin-left: 20px;
  }

  .index_xms_text {
    border-radius: 12px;
    background: rgba(235, 245, 255, 1);
    width: 74%;
    height: 52px;
    display: flex;
    align-items: center;
    margin-left: 8px;
    .index_xms_text_span {
      margin-left: 20px;
      color: rgba(0, 38, 51, 1);
      font-size: 20px;
    }
  }
}

.index_xms1 {
  position: absolute;
  top: 320px;
  right: 1.5%;
  width: 31.5%;
  height: 82px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;

  .index_xms_img {
    width: 52px;
    height: 52px;
    margin-left: 20px;
  }

  .index_xms_text {
    border-radius: 12px;
    background: rgba(237, 251, 255, 1);
    width: 74%;
    height: 52px;
    display: flex;
    align-items: center;
    margin-left: 8px;
    .index_xms_text_span {
      margin-left: 20px;
      color: rgba(0, 38, 51, 1);
      font-size: 20px;
    }
  }
}
</style>
